@extends('admin.common.main')
@section('header')
    <link rel="stylesheet" type="text/css" href="/webuploader-0.1.5/webuploader.css">
@endsection

@section('content')
    @include('admin.common.error'){{--如果出现错误--}}
        <form action="{{route('admin.fang_owners.store')}}" method="post" class="form form-horizontal" id="form-member-add">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="name" name="name">
                </div>
            </div>


            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <input name="sex" type="radio" id="sex-1" checked value="0">
                        <label for="sex-1">男</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="sex-2" name="sex" value="1">
                        <label for="sex-2">女</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="sex-2" name="sex" value="3">
                        <label for="sex-2">未知</label>
                    </div>

                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="age" name="age">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机号：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="phone" name="phone">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>地址：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="address" name="address">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证号：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="card" name="card">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证图片：</label>
                <div class="formControls col-xs-8 col-sm-9">

                    <div id="uploader" class="wu-example">
                        <!--用来存放文件信息-->
                        <div id="thelist" class="uploader-list"></div>
                        <div class="btns">
                            <div id="picker">选择文件</div>

                            <input type="hidden" value="" class="input-text"  name="pic" id="pic">
                        </div>

                    </div>

                    <div id="imgList">


                    </div>



                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" placeholder="@" name="email" id="email">
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </article>

@endsection



@section('js')
    <script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <!--引入JS-->
    <script type="text/javascript" src="/webuploader-0.1.5/webuploader.js"></script>
    <script type="text/javascript">

        /*   分片上传 没有写后端的*/
        var uploader = WebUploader.create({
            auto: true,
            // 本地 swf文件路径
            swf:"/webuploader-0.1.5/js/Uploader.swf'",
            formData:{_token:"{{csrf_token()}}" },
            // 文件接收服务端。
            server: "{{route('admin.owner.ossUploadFile')}}",
            threads: 4,
            chunked:true, // [默认值：false] 是否要分片处理大文件上传。
            chunkSize:2*1024*1024,// 设置为1M {Boolean} [可选] [默认值：5242880] 如果要分片，分多大一片？ 默认大小为5M.
            chunkRetry: 3 ,//[可选] [默认值：2] 如果某个分片由于网络问题出错，允许自动重传多少次？


            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });
        /*
        多文件上传 重要的市前端的数据渲染
        图片追加
        Val 获取后 拼接 在赋值
         */
        uploader.on( 'uploadSuccess', function( file,ret ) {
            console.log(ret)
            //图片路径 并追加渲染
            let loaclImg=`
            <div style="position: relative;width:100px; display: inline-block">
            <img src="${ret.data.file}" width="100"/>
            <strong onclick="delpic(this,'${ret.data.file}')" style="position: absolute;right: 2px;top:2px; color: yellow;font-size: 15px;">x</strong>
            </div>   `;
            $('#imgList').append(loaclImg);

            //获取当前输入框的值，在给字符串值追加新增的内容  然后返回值
            var picVal =  $('#pic').val();
            var picVal =picVal + "#" + ret.data.file;
            $('#pic').val(picVal)
        });
        /*
        当点击删除时
        先删除当前文件
        然后删除对应的 input 值
        最后传入后台 删除文件
         */
        function delpic(ret,pic) {

            $(ret).parent().remove();

            var picVal =  $('#pic').val()
            //将传入内容替换为空字符串
            var res= picVal.replace(`#${pic}`,"")
            //传回内容
            $('#pic').val(res)


            $.ajax({
                type:"DELETE",
                url:"{{route('admin.owner.ossDelPic')}}",
                data:{pic,_token:"{{csrf_token()}}"},
                success:res=>{


                    console.log();
                }


            })
            return false

        }


    </script>


@endsection
